<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="header">
                <slot>
                    <Form :model="formItem" :label-width="80">
                        <Row style="margin-left: 0px" type="flex" justify="start" class="code-row-bg">
                            <Col span="4">
                                <FormItem label="">
                                    <Select v-model="model1" style="width:200px" ref="new"  @on-change="selectOnChange">
                                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="6">
                                <FormItem label="">
                                    <Select v-model="formItem.select1">
                                        <Option value="1">托尼史塔克</Option>
                                        <Option value="2">彼得帕克</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="6">
                                <FormItem label="车牌号：">
                                    <Input  v-model="sel_info" placeholder="请输入车牌号"></Input>
                                </FormItem>
                            </Col>
                            <Button style="margin-bottom:25px;margin-left: 10px"  @click="select_info(sel_info)" type="primary">查询</Button>
                        </Row>
                    </Form>
                </slot>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" >
                        <Table border ref="selection" :columns="columns4.columns4Header"
                               :data="columns4.columns4Bodey">
                            <template slot-scope="{}" slot="action">
                                <Button type="primary" size="small" style="margin-right: 5px">
                                    修改
                                </Button>
                            </template>
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">

                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { vehicle, uvehicle } from '@/api/test'
export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      cityList: [
        {
          value: '1',
          label: '添加用户车辆'
        },
        {
          value: '2',
          label: '删除用户车辆'
        }
      ],
      model1: '1',
      sel_info: '',
      formItem: {
        input: '',
        select: '1',
        select1: '1'
      },
      columns4: {
        columns4Header: [
          {
            title: '车牌号',
            key: 'vehicle_no'
          },
          {
            title: '所属单位',
            key: 'unit_name'
          },
          {
            title: '终端ID',
            key: 'device_real_id'
          },
          {
            title: 'SIM卡号',
            key: 'device_sim'
          },
          {
            title: '创建时间',
            key: 'create_time'
          }
        ],
        columns4Bodey: []
      },
      //  计算总数
      pageOptions: {
        totalRecord: 0
      },
      // 传递参数：参数要全
      param: {
        page: 1,
        unit_id: 1
      }
    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    Initialization () {
      this.loading = true
      vehicle({ type: e }).then(ret => {
        this.loading = false
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    getList () {
      vehicle(this.param).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    selectOnChange (e) {
      console.log(e)
      if (e === '2') {
        uvehicle({ type: e }).then(ret => {
          this.columns4.columns4Bodey = ret.data.results
          this.pageOptions.totalRecord = ret.data.count
        })
      } else {
        this.param.type = e
        this.getList()
      }
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    select_info (e) {
      sel_vehicle({ keyword: e }).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    }
  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }

}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
